@charset 'utf8';
@charset 'utf-8';
@color:#ccc;
@color-a:#f40;  
@color-b:#F5F5F5;   // bg
@color-c: #6c6c6c;
@font:12px;
body{
  width: 100%;
  height: 100%;
  position: relative;
}
.head{
  width: 100%;
  >.center{
    width: 990px;
    height: 35px;
    background-color:@color-b ;
    margin: 0 auto;
    >div:nth-child(1){
      float: left;
      >ul{
        >li{
         float: left;
         >a{
          color: @color-c;
          font-size: @font;
          margin-right: 7px;
          height: 35px;
          line-height: 35px;
          &:hover{
            color: @color-a;
          }
         }
        }
        >li:nth-child(1){
          margin-left: 5px;
          >a{
            color: #f40;
          }
        }
     }
    }
    >div:nth-child(2){
        float: right;
         >ul{
          >li{
            float: left;
            padding: 0 5px;
              >a{
                color: @color-c;
                font-size: @font;
                margin-right: 7px;
                height: 35px;
                line-height: 35px;
                &:hover{
                  color: @color-a;
                }
               }
          }
          >li:nth-child(2){
            position: relative;
            border: 1px solid @color-b;
            border-top: none;
            border-bottom: none;
            >a{
              display: block;
              width: 100%;
              height: 100%;
            }
            &:hover{
              background-color: white;
            }
            &:hover >span{
              transform: rotate(180deg);
              top: 10px;
            }
            &:hover >div{
              display: block;
            }
            >span{
              position: absolute;
              top: 15px;
              right: 0px;
              display: block;
              width:0;
              height:0;
              border:4px solid transparent;
              border-top-color:@color-c;
            }
            >div{
              box-sizing: border-box;
              border: 1px solid @color-b;
              border-top: none;
              display: none;
              background-color: white;
              position: absolute;
              top: 35px;
              left: 0;
              width: 80px;
              >P{
                text-align: center;

                &:hover{
                  background-color: @color-b;
                }
                >a{
                  color:@color-c;
                  font-size: @font;
                }
              }

            }
          }
          >li:nth-child(3){
            >a{
              >i{
                // background-color: @color-a;
                // color: @color-a;
              }
            }
          }
          >li:nth-child(4){
            position: relative;
            &:hover >span{
              transform: rotate(180deg);
              top: 10px;
            }
            >a{
              >i{
                // background-color: @color-a;
                font-size: 12px;
              }
            }
            >span{
              position: absolute;
              top: 15px;
              right: 0px;
              display: block;
              width:0;
              height:0;
              border:4px solid transparent;
              border-top-color:@color-c;
            }
            &:hover{
              background-color: white;
            }
            &:hover >div{
              display: block;
            }
            >div{
              box-sizing: border-box;
              border: 1px solid @color-b;
              border-top: none;
              display: none;
              background-color: white;
              position: absolute;
              top: 35px;
              left: 0;
              width: 70px;
              >p{
                text-align: center;
                &:hover{
                  background-color: @color-b;
                }
                >a{
                  color:@color-c;
                  font-size: @font;
                }
              }

            }
          }
          

         }    
    }
    
  }
}
.img{
  width: 100%;
  padding: 30px 0 0 0;
  position:relative;
  .center{
     width: 990px;
     margin: 0 auto;
     >span{
      color: #3c3c3c;
     font-size: 22px;
     }
     img{
      display: inline-block;
      vertical-align: middle;
     } 
     >div{
      width: 100%;
      // height: 404px;
      padding: 50px 0 0 0;
      >div:nth-child(1){
        width: 100%;
        height: 80px;
      }
      >div:nth-child(2){
        width: 380px;
        margin: 0 auto;
        // background-color: aqua;
        >div:nth-child(1){
          width: 100%;
          height: 34px;
          >div{
            float: left;
            height: 34px;
            line-height: 34px;
          }
          >div:nth-child(1){
            >label{
              display: block;
              text-align: right;
            }
          }
          >div:nth-child(2){
            margin-left: 10px;
            border: 1px solid #ccc;
            border-radius: 5px  0 0 5px;
            overflow: hidden;
           >select{
            width: 127px;
            text-align: center;
            appearance: none;
            outline: none;
            border: none;
           
            height: 35px;
            line-height: 34px;
            border-right: none;
            margin-top: 1px;
           }
          }
          >div:nth-child(3){
            border: 1px solid #ccc;
            border-radius:0 5px 5px 0;
            overflow: hidden;
            >input{
              width: 182px;
              appearance: none;
            outline: none;
            border: none;
            height: 34px;
            // line-height: px;
            text-indent: 5px;
            }
          }
        }
        >div:nth-child(2){
          margin-top: 20px;
          width: 100%;
          height: 34px;
          position: relative;
          >div{
            float: left;
            height: 34px;
            line-height: 34px;
            position: relative;
          }
          >div:nth-child(1){
            >label{
              width: 56px;
              display: block;
              text-align: right;
            }
          }
         
          >div:nth-child(2){
            border: 1px solid #ccc;
            border-radius:0 5px 5px 0;
            overflow: hidden;
            margin-left: 10px;
            border-radius: 5px;
            overflow: hidden;
            >input{
              width: 225px;
              appearance: none;
            outline: none;
            border: none;
            height: 34px;
            // line-height: px;
            text-indent: 5px;
            }
            >span{
              color: #FF5000;
              font-size: 14px;
              margin-right: 10px;
            }
          }
         
        }
        >div:nth-child(3){
          position: absolute;
          top: 400px;
            border: 1px solid #ccc;
            border-radius:0 5px 5px 0;
            overflow: hidden;
            margin-left: 66px;
            border-radius: 5px;
            overflow: hidden;
            width: 311px;
            height: 34px;
            // background-color: #f40;
          >button{
            width: 311px;
            appearance: none;
            outline: none;
            border: none;
            height: 34px;
            // background-color: #f40;
            color: white;
            font-size: 14px;
            background: -webkit-linear-gradient(left,rgb(231, 95, 46) ,rgb(227, 83, 83),);
           
          }
        }
        >div:nth-child(4){
          position: absolute;
          
          width: 380px;
          margin: 160px auto;
          >input{
            display: block;
            margin-left: 66px;
            margin-top: 12px;
            float: left;
          }
          >div{
             width: 290px;
             float: right;
             color: @color-c;
             font-size: 13px;
             line-height:16px;
             padding: 10px 0;
             >a{
              color: #FF5000;
             }

          }
        }
        >div:nth-child(5){
          position: absolute;
          width: 380px;
          margin: 230px auto;
         >a{
          display: block;
          font-size: 12px;
          color: @color-a;
          text-align: right;
          width: 150px;
          float: right;
          padding: 0 5px;
         }
        }
        >div:nth-child(6){
          display: none;
            position: absolute;
            top: 265px;
            left: 636px;
            // display: none;
            width: 200px;
            height: 35px;
            line-height: 35px;
            background-color: rgba(40,44,52,.9);
            color: white;
            border-radius: 5px;
            z-index: 1000;
        }

      }
     }
     
   }
   >.foot{
    width: 100%;
    position:absolute;
    top: 600px;
    >div{
     width: 990px;
     margin:0 auto;
     >div:nth-child(1){
      border-top:1px solid #ccc ;
      border-bottom:1px solid #ccc ;
      color: @color-c;
      font-size: 9px;
      padding: 10px 0;
      >a{
        color: @color-c;
        font-size: 12px;
        padding: 5px;
        &:hover{
          color:@color-a ;
        }
      }
      >span{
        color: #b3afaf;
      }
     }
     >div:nth-child(2){
      padding: 10px 0;
      >a{
        color: @color-c;
        font-size: 12px;
        padding: 5px;
        &:hover{
          color:@color-a ;
        }
      }
     }
     >div:nth-child(3){
      padding: 10px 0;
      >p{
        color: @color-c;
        font-size: 12px;
        text-indent: 5px;
      }
     }
  
    }
  }
}

